<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示物业公司</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
    <script src="layer/layer.js"></script>

    <style>
        .layui-table-cell{
            height:60px;
            line-height:60px;
        }
        th .layui-table-cell {
            height: 30px;
            line-height: 30px;
        }

        th .laytable-cell-1-0-7 {
            height: 30px;
            line-height: 30px;
        }
        div{
            text-align: center;
        }
    </style>


</head>
<body>

<div class="layui-input-block">
    <input type="text" style="height: 45px;width: 210px;font-size: 17px;float: left;margin-top: 7px" id="searchname" required  lay-verify="required" placeholder="请输入物业公司名称" autocomplete="off" class="layui-input">
    <button type="button" id="searchbtn" class="layui-btn" style="height: 50px;width: 80px;float:left;margin-top: 5px;margin-left: 10px">
        <i class="layui-icon layui-icon-search" style="font-size: 25px"></i>
    </button>
</div>
<div style="margin-top: 45px">
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>

<script type="text/html" id="barDemo2">
    <button class="layui-btn" lay-event="bianji" id="bianji" ><i class="layui-icon layui-icon-edit"></i>编辑</button>
</script>

<script type="text/html" id="img">
    <div><img src="/upload/{{d.propertylogo}}" style="width: auto;height: auto;  max-width: 70px;  max-height: 70px;"></div>
</script>


<script type="text/html" id="titleTpl">
    {{d.LAY_TABLE_INDEX+1}}
</script>

<script type="text/html" id="buttonTpl">
    <div style="text-align: center;margin: auto;width: 106px;height: 42px;margin-top: 12px">
        {{#  if(d.status == 1){ }}
            <button class="layui-btn" style="float: left;background-color: #5FB878" id="qiyong" onclick="qiyong(this)">启用</button>
            <div style="height: 38px;width: 30px;border: gainsboro solid 1px;float: left;line-height:38px; text-align:center;border-left: none">
                <i id="gouzi" class="layui-icon layui-icon-ok" style="color: #5FB878"></i>
            </div>
        {{#  } else { }}
            <button class="layui-btn layui-btn-primary" style="float: left" id="qiyong" onclick="qiyong(this)">启用</button>
            <div style="height: 38px;width: 30px;border: gainsboro solid 1px;float: left;line-height:38px; text-align:center;border-left: none">
                <i id="gouzi" class="layui-icon" style="color: #5FB878"></i>
            </div>
        {{#  } }}
    </div>
</script>

</body>
<script>
    var $=layui.$;

    function fenye() {
        layui.use('table', function() {
            var table = layui.table;

            table.render({
                elem: '#test'
                , url: '/getdata'
                , title: '物业数据表'
                , cols: [[
                    {field: 'id', title: '序号', width: 80,height:70, fixed: 'left', unresize: true,sort:true,type:"numbers"
                        // ,templet: "#titleTpl"
                        // ,templet: function(d){
                        //     return d.id
                        // }
                    }
                    // ,{field:'id', title: 'ID', hide:true,templet:function (d) {
                    //         return d.id;
                    //     }}
                    , {field: 'propertyname', title: '物业公司名称', width: 170,height:70, edit: 'text'}
                    , {field: 'propertycode', title: '物业编号', width: 170,height:70, edit: 'text'}
                    , {field: 'director', title: '负责人', width: 170,height:70, edit: 'text'}
                    , {field: 'telphone', title: '联系方式', width: 170,height:70, edit: 'text'}
                    , {field: 'propertyaddress', title: '公司地址', width: 170,height:70, edit: 'text'}
                    , {field: 'propertyindroduce', title: '公司简介', width: 170,height:70, edit: 'text'}
                    , {field: 'propertylogo', title: '公司logo',templet:'#img', width: 170,height:70}
                    , {field: 'status', title: '是否启用',templet:'#buttonTpl', width: 170,height:70,align:'center'}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo2', width: 170,height:70}
                ]]
                , page: true
                ,done: function(res, curr, count){
                    //如果是异步请求数据方式，res即为你接口返回的信息。
                    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                    // console.log(res);
                    //得到当前页码
                    //console.log(curr);
                    //得到数据总量
                    // console.log(count);
                    for (let a=0;a<res.data.length;a++){
                        $("tbody").find("tr").eq(a).find("td").eq(9).find("div").eq(0).find("button").attr("name",res.data[a].id);
                    }

                }
            });

            $('.layui-btn').click(function () {
                var searchname = $('#searchname');
                table.reload('test', {
                    url:"/getdata"
                    ,where: {
                        searchname: searchname.val()
                    }
                    ,page: {
                        curr: 1
                    }
                });
            })

            //监听事件
            table.on('tool(test)', function(obj){
                var data = obj.data;
                var tr=obj.tr;
                var page=obj.curr;
                layer.open({
                    type: 2,
                    title: '编辑',
                    shadeClose: true,
                    shade: 0.6,
                    content: '/getedit?id='+data.id,
                    area: ['850px', '810px'],
                    cancel: function(index, layero){
                        let currpage = $('.layui-laypage-em').next().text();
                        table.reload('test', {
                            page: {
                                curr: currpage
                            }
                        });
                        obj.update ({
                            propertyname:'123'
                        });
                    }
                });
            });

            table.on('edit(test)', function(obj){
                var value = obj.value //得到修改后的值
                    ,data = obj.data //得到所在行所有键值
                    ,field = obj.field; //得到字段
                $.ajax({
                    type: "POST",
                    url: "/updateby",
                    data: {id:data.id, columname:field,value:value},
                    dataType: "text",
                    success: function(data){
                        if (data=="1"){
                            layer.msg('修改成功');
                        }else{
                            layer.msg("修改失败");
                        }
                    }
                });
            });

        });
    }

    function qiyong(obj) {
        var tr=obj.parentNode.parentNode.parentNode.parentNode;
        var id=tr.cells[0].lastElementChild.innerHTML;
        var code=tr.cells[2].lastElementChild.innerHTML;
        console.log("id=="+id);
        if (obj.className=="layui-btn"){
            $.ajax({
                type: "POST",
                url: "/updatebyid",
                data: {id:id, status:"0",code:code},
                dataType: "text",
                success: function(data){
                    layui.use('layer', function(){
                        var layer = layui.layer;
                        if (data=="1"){
                            obj.setAttribute("class","layui-btn layui-btn-primary");
                            obj.style.backgroundColor="";
                            obj.parentNode.lastElementChild.lastElementChild.setAttribute("class","layui-icon")
                            layer.msg('禁用成功');
                        }else{
                            layer.msg("禁用失败");
                        }
                    });
                }
            });
        }else{
            $.ajax({
                type: "POST",
                url: "/updatebyid",
                data: {id:id, status:"1",code:code},
                dataType: "text",
                success: function(data){
                    if (data=="1"){
                        obj.setAttribute("class","layui-btn");
                        obj.style.backgroundColor="#5FB878";
                        obj.parentNode.lastElementChild.lastElementChild.setAttribute("class","layui-icon layui-icon-ok")
                        layer.msg('启用成功');
                    }else{
                        layer.msg("启用失败");
                    }
                }
            });
        }
    }

    fenye();


</script>
</html>